<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
</head>
<body>
	Welcome<br/><input id="text" type="text"/>
     <button id="send">发送消息</button>
    <hr/>
    <!--userno:发送消息人的编号-->
    发送人:<div id="userno">1234</div>
    接收人：<input type="text" id="usernoto"><br>
    <button id="closebtn">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>

	<script type="text/javascript">
	  var websocket; // 就是一个通信管道
	  var userno=document.getElementById('userno').innerHTML;
      var target = "ws://localhost:8080/PigTalk/echo/"+userno;//服务端的url，注意以ws开头
    //三个判断用于获取ws通信管道（浏览器兼容）
      if('WebSocket' in window){  	 
    	  websocket = new WebSocket(target);
      }else if('MozWebSocket' in window){
    	  websocket = new MozMozWebSocket(target);
      }else{
          alert("WebSocket is not supported by this browse");
         
      } ;  
      websocket.onopen = function () {
          setMessageInnerHTML("WebSocket连接成功");
      };
         
          //ws.onopen = function(){}  链接开启会执行方法
          //ws.onclose = function(){}  断开连接会执行方法
          //以上两个实际用处并不多，主要是下面的
          //服务器又信息返回就执行方法
         

    //将消息显示在网页上
      function setMessageInnerHTML(sendMessage) {
          document.getElementById('message').innerHTML += sendMessage + '<br/>';
      };
     //接收到消息的回调方法
      websocket.onmessage = function (event) {
          setMessageInnerHTML(event.data);
      } 
      
      $(function () {
			alert("dd");
			$("#send").click(function() {
				send();
				$("#text").val("");
			});
			$("#closebtn").click(function() {
				closeWebSocket();
			})
		});
    //发送消息
    
      function send() {
    	  alert("888");
          var message = document.getElementById('text').value;//要发送的消息内容
          var now=getNowFormatDate();//获取当前时间
          document.getElementById('message').innerHTML += (now+"发送人："+userno+'<br/>'+"---"+message) + '<br/>';
          document.getElementById('message').style.color="red";
          var ToSendUserno=document.getElementById('usernoto').value; //接收人编号：4567
          message=message+"|"+ToSendUserno//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
          websocket.send(message); 
      };
    //获取当前时间
      function getNowFormatDate() {
          var date = new Date();
          var seperator1 = "-";
          var seperator2 = ":";
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
              month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
              strDate = "0" + strDate;
          }
          var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                  + " " + date.getHours() + seperator2 + date.getMinutes()
                  + seperator2 + date.getSeconds();
          return currentdate;
  		}   ;  
  		 //连接关闭的回调方法
  	    websocket.onclose = function () {
  	        setMessageInnerHTML("WebSocket连接关闭");
  	    };
  	    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  	    window.onbeforeunload = function () {
  	        closeWebSocket();
  	    };
  	    //关闭WebSocket连接
  	    function closeWebSocket() {
  	        websocket.close();
  	    };

  </script>
</body>
</html>